<template>
	<view class="newext-list">
		<view v-for="item,i in musicList" :key="item.id" @tap="bofang(item)" hover-class="hh">
			<view class="newext-top">{{item.name}} <text>{{item.song.alias[0]?"("+item.song.alias[0]+")":''}}
				</text></view>
			<view class="newext-bottom">
				<view v-if="item.canDislike"></view>
				<text>　{{item.song.artists[0].name}}-{{item.song.album.name}} </text>
			</view>
			<view class="play">
				<view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["musicList"],
		methods:{
			bofang(item){
				this.$emit('lis',item)
			}
		}
	}
</script>

<style scoped>
	.newext-list {
	
		display: flex;
		flex-wrap: wrap;
		margin-top: 28rpx;
	}
	
	.newext-list>view {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding: 12rpx 0 12rpx 20rpx;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
	}
	
	.hh {
		background-color: rgba(0, 0, 0, .4);
	}
	
	.newext-list>view>view {
	
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;
	}
	
	.newext-top {
		font-size: 34rpx;
		color: #333;
		padding-right: 77rpx;
	}
	
	.newext-top>text {
		color: #888;
		margin-left: 8rpx;
	}
	
	.newext-bottom {
		font-size: 24rpx;
		color: #888;
		margin-right: 77rpx;
	}
	
	.newext-bottom>view {
		display: inline-block;
		width: 30rpx;
		height: 20rpx;
		background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
		background-size: 166px 97px;
		margin-top: 7rpx;
	}
	
	.play {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		position: absolute;
		right: 0;
		top: 20rpx;
	}
	
	.play>view {
		width: 52rpx;
		height: 52rpx;
		background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat -24px 0;
		background-size: 166px 97px;
	}
	
</style>
